import { VantComponent } from '../common/component'
import { getRect, requestAnimationFrame } from '../common/utils'
VantComponent({
  props: {
    text: {
      type: String,
      value: '',
      observer: 'init',
    },
    mode: {
      type: String,
      value: '',
    },
    url: {
      type: String,
      value: '',
    },
    openType: {
      type: String,
      value: 'navigate',
    },
    delay: {
      type: Number,
      value: 1,
    },
    speed: {
      type: Number,
      value: 60,
      observer: 'init',
    },
    scrollable: null,
    leftIcon: {
      type: String,
      value: '',
    },
    customClass: String,
    color: String,
    backgroundColor: String,
    background: String,
    wrapable: Boolean,
  },
  data: {
    show: true,
  },
  created() {
    this.resetAnimation = wx.createAnimation({
      duration: 0,
      timingFunction: 'linear',
    })
  },
  destroyed() {
    this.timer && clearTimeout(this.timer)
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      requestAnimationFrame(() => {
        Promise.all([getRect(this, '.van-notice-bar__content'), getRect(this, '.van-notice-bar__wrap')]).then(
          (rects) => {
            const [contentRect, wrapRect] = rects
            const { speed, scrollable, delay } = this.data
            if (
              contentRect == null ||
              wrapRect == null ||
              !contentRect.width ||
              !wrapRect.width ||
              scrollable === false
            ) {
              return
            }
            if (scrollable || wrapRect.width < contentRect.width) {
              const duration = ((wrapRect.width + contentRect.width) / speed) * 1000
              this.wrapWidth = wrapRect.width
              this.contentWidth = contentRect.width
              this.duration = duration
              this.animation = wx.createAnimation({
                duration,
                timingFunction: 'linear',
                delay,
              })
              this.scroll(true)
            }
          }
        )
      })
    },
    scroll(isInit = false) {
      this.timer && clearTimeout(this.timer)
      this.timer = null
      this.setData({
        animationData: this.resetAnimation
          .translateX(isInit ? 0 : this.wrapWidth)
          .step()
          .export(),
      })
      requestAnimationFrame(() => {
        this.setData({
          animationData: this.animation.translateX(-this.contentWidth).step().export(),
        })
      })
      this.timer = setTimeout(() => {
        this.scroll()
      }, this.duration + this.data.delay)
    },
    onClickIcon(event) {
      if (this.data.mode === 'closeable') {
        this.timer && clearTimeout(this.timer)
        this.timer = null
        this.setData({ show: false })
        this.$emit('close', event.detail)
      }
    },
    onClick(event) {
      this.$emit('click', event)
    },
  },
})
